<template>
  <div class="app-container">
    <el-page-header @back="goBack" content="设备详情">
    </el-page-header>
    <el-divider></el-divider>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- <el-tab-pane label="详情信息" name="first">
        <el-row :gutter="20" v-if="activeName === 'first'">
          <el-col :span="12">
            <el-descriptions :column="1" border :labelStyle="{ 'font-weight': 'bold' }">
              <el-descriptions-item label="电压">
                {{ deviceDetail.battery }}
              </el-descriptions-item>
              <el-descriptions-item label="剩余量">
                <span v-if="deviceDetail.paymode == 0">{{ deviceDetail.leftAmount }}</span>
                <span v-if="deviceDetail.paymode == 1">{{ deviceDetail.leftValue }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="日用量">
                {{ deviceDetail.dayUse }}
              </el-descriptions-item>
              <el-descriptions-item label="累计用量">
                {{ deviceDetail.totalUse }}
              </el-descriptions-item>
              <el-descriptions-item label="累计购买金额">
                {{ deviceDetail.totalBuy }}
              </el-descriptions-item>
              <el-descriptions-item label="最新上传时间">
                {{ deviceDetail.readTime }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </el-tab-pane> -->
      <el-tab-pane label="设备数据" name="second">
        <el-table v-if="activeName === 'second'" border style="width: 100%" :data="tableData">
          <el-table-column prop="deviceNo" label="设备编号">
          </el-table-column>
          <el-table-column prop="dayUse" label="日用量(水/升)/总用量(电/度)">
          </el-table-column>
          <el-table-column prop="cumulativeUse" label="总用量(水)">
          </el-table-column>
          <el-table-column prop="reportType" label="上报类型">
          </el-table-column>
          <el-table-column prop="stateWork" label="工作状态">
          </el-table-column>
          <!-- <el-table-column prop="battery" label="电压">
          </el-table-column> -->

          <!-- <el-table-column prop="signalNum" label="信号强度" align="center"></el-table-column> -->
          <!-- <el-table-column prop="stateWord" label="表具状态" align="center"></el-table-column> -->
          <el-table-column prop="createTime" label="上报时间">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="设备测试" name="third">
        <el-form size="small" :inline="true" label-width="90px">
          <el-form-item label="指令">
            <el-input v-model="code" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="testDevice">发送</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- <el-tab-pane label="服务" name="third"></el-tab-pane> -->
      <!-- <el-tab-pane label="日志" name="fourth"></el-tab-pane> -->
      <!-- <el-tab-pane label="模拟上报" name="fifth"></el-tab-pane> -->
      <!-- <el-tab-pane label="设备配置" name="sixth"></el-tab-pane> -->
      <!-- <el-tab-pane label="模拟设备" name="seventh"></el-tab-pane> -->

    </el-tabs>
  </div>
</template>

<script>
import { deviceDetail, getDeviceData, deviceServe, testDevice } from '@/api/MaintainView/MaintainMaterial/index.js'

export default {
  data() {
    return {
      code: "",
      dialog_newly: false,
      activeName: 'second',
      searchData: {},
      deviceDetail: "",
      tableData: []
    }
  },
  methods: {
    testDevice() {
      testDevice({
        no: this.searchData.no,
        code: this.code
      }).then(res => {

      })
    },
    goBack() {
      this.$router.push('./MaintainMaterial')
    },
    handleClick(tab, event) {
      console.log(tab, event);
      // if (tab.name == 'second') {
      //   getDeviceData(
      //     {
      //       meterNo: this.searchData.meterNo,
      //     }
      //   ).then(res => {
      //     if (res.data.success == true) {
      //       var data = res.data.data.list
      //       data.forEach(Item => {
      //         Item.createTime.forEach(item => {
      //           if (item < 10) {
      //             item = '0' + item
      //           }
      //         })
      //       });
      //       data.forEach(Item => {
      //         Item.createTime = Item.createTime[0] + '-' + Item.createTime[1] + '-' + Item.createTime[2] + ' ' + Item.createTime[3] + ':' + Item.createTime[4] + ':' + Item.createTime[5]
      //       });

      //       this.tableData = data
      //     }
      //   })
      // }
      // if (tab.name == 'third') {
      //   deviceServe(
      //     {
      //       masterKey: this.searchData.masterKey,
      //       productId: this.searchData.productId,
      //       pageNow: 0,
      //       pageSize: 10,
      //     }
      //   ).then(res => {
      //     if (res.data.success == true) {

      //     }
      //   })
      // }
    },

    // getDetail() {
    //   deviceDetail(
    //     {
    //       id: this.searchData.id,
    //     }
    //   ).then(res => {
    //     if (res.data.success == true) {
    //       this.deviceDetail = res.data.data
    //     }
    //   })
    // }
    getDeviceData() {
      getDeviceData(
        {
          deviceNo: this.searchData.no,
          current: 0,
          pageSize: 10,
        }
      ).then(res => {
        if (res.data.success == true) {
          var data = res.data.data.list
          // data.forEach(Item => {
          //   Item.createTime.forEach(item => {
          //     if (item < 10) {
          //       item = '0' + item
          //     }
          //   })
          // });
          // data.forEach(Item => {
          //   Item.createTime = Item.createTime[0] + '-' + Item.createTime[1] + '-' + Item.createTime[2] + ' ' + Item.createTime[3] + ':' + Item.createTime[4] + ':' + Item.createTime[5]
          // });

          this.tableData = data
        }
      })
    }
  },
  created() {
    console.log(this.$route.params);
    this.searchData = this.$route.params
    this.getDeviceData()
  },
};
</script>

<style lang="scss" scoped></style>
